<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建学习路径 - 试题库管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CBCB',
                        accent: '#FF7D00',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .fade-in {
                animation: fadeIn 0.5s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .path-node {
                transition: all 0.3s ease;
            }
            .path-node:hover {
                transform: scale(1.03);
            }
            .progress-bar {
                transition: width 1s ease-in-out;
            }
            .step-active {
                @apply border-primary bg-primary/5 text-primary;
            }
            .step-completed {
                @apply border-success bg-success/5 text-success;
            }
            .form-input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center space-x-2">
                <button id="sidebar-toggle" class="lg:hidden text-gray-500 hover:text-primary transition-colors">
                    <i class="fa fa-bars text-xl"></i>
                </button>
                <h1 class="text-xl font-bold text-primary flex items-center">
                    <i class="fa fa-book mr-2"></i>
                    <span>试题库管理系统</span>
                </h1>
            </div>
            
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">首页</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">题库</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">学习路径</a>
                <a href="#" class="text-primary font-medium border-b-2 border-primary pb-1">创建路径</a>
                <a href="#" class="text-gray-600 hover:text-primary transition-colors">统计分析</a>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <input type="text" placeholder="搜索学习路径、课程..." 
                           class="pl-10 pr-4 py-2 rounded-full bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary/20 transition-all w-40 lg:w-64">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
                
                <div class="relative">
                    <button class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-bell text-xl"></i>
                        <span class="absolute -top-1 -right-1 bg-danger text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>
                    </button>
                </div>
                
                <div class="flex items-center space-x-2 cursor-pointer group">
                    <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
                    <span class="hidden md:inline font-medium">张老师</span>
                    <i class="fa fa-angle-down text-gray-400 group-hover:text-primary transition-colors"></i>
                </div>
            </div>
        </div>
    </header>

    <div class="flex flex-1 overflow-hidden">
        <!-- 左侧边栏 - 学习路径导航 -->
        <aside id="sidebar" class="w-64 bg-white shadow-md transform -translate-x-full lg:translate-x-0 fixed lg:static h-full z-40 transition-transform duration-300 ease-in-out overflow-y-auto scrollbar-hide">
            <div class="p-4 border-b">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="font-bold text-lg">学习路径导航</h2>
                    <div class="relative">
                        <select class="appearance-none bg-gray-100 rounded-lg px-3 py-1 pr-8 focus:outline-none focus:ring-1 focus:ring-primary">
                            <option>全部学科</option>
                            <option>数学</option>
                            <option selected>数学思想方法</option>
                            <option>物理</option>
                            <option>化学</option>
                        </select>
                        <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                    </div>
                </div>
                
                <div class="relative">
                    <input type="text" placeholder="搜索学习路径..." 
                           class="w-full pl-8 pr-4 py-2 rounded-lg bg-gray-100 focus:outline-none focus:ring-1 focus:ring-primary">
                    <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>
            
            <!-- 学习路径列表 -->
            <div class="p-4">
                <h3 class="font-medium text-sm text-gray-500 mb-3">推荐学习路径</h3>
                
                <div class="space-y-2">
                    <div class="hover:bg-gray-50 p-3 rounded-lg cursor-pointer transition-colors">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fa fa-graduation-cap text-gray-400 mr-2"></i>
                                <span>高中数学基础夯实</span>
                            </div>
                            <span class="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">进行中</span>
                        </div>
                        <div class="mt-2 flex items-center">
                            <div class="w-full bg-gray-200 rounded-full h-1.5 mr-2">
                                <div class="bg-primary h-1.5 rounded-full progress-bar" style="width: 45%"></div>
                            </div>
                            <span class="text-xs text-gray-500">45%</span>
                        </div>
                    </div>
                    
                    <div class="bg-primary/5 border-l-2 border-primary p-3 rounded-r-lg cursor-pointer hover:bg-primary/10 transition-colors">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fa fa-lightbulb-o text-primary mr-2"></i>
                                <span>数学思想方法</span>
                            </div>
                            <span class="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded-full">进行中</span>
                        </div>
                        <div class="mt-2 flex items-center">
                            <div class="w-full bg-gray-200 rounded-full h-1.5 mr-2">
                                <div class="bg-primary h-1.5 rounded-full progress-bar" style="width: 25%"></div>
                            </div>
                            <span class="text-xs text-gray-500">25%</span>
                        </div>
                    </div>
                    
                    <div class="hover:bg-gray-50 p-3 rounded-lg cursor-pointer transition-colors">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fa fa-line-chart text-gray-400 mr-2"></i>
                                <span>数学竞赛进阶</span>
                            </div>
                            <span class="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">未开始</span>
                        </div>
                    </div>
                    
                    <div class="hover:bg-gray-50 p-3 rounded-lg cursor-pointer transition-colors">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center">
                                <i class="fa fa-calculator text-gray-400 mr-2"></i>
                                <span>概率统计应用</span>
                            </div>
                            <span class="text-xs bg-gray-100 text-gray-500 px-2 py-0.5 rounded-full">未开始</span>
                        </div>
                    </div>
                </div>
                
                <div class="mt-6">
                    <button class="w-full flex items-center justify-center p-3 border border-dashed border-gray-300 rounded-lg text-gray-500 hover:bg-gray-50 transition-colors">
                        <i class="fa fa-plus mr-2"></i>
                        <span>创建新学习路径</span>
                    </button>
                </div>
            </div>
        </aside>
        
        <!-- 主内容区 -->
        <main class="flex-1 overflow-y-auto bg-gray-50 p-4 lg:p-6">
            <div class="container mx-auto">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm text-gray-500 mb-4">
                    <a href="#" class="hover:text-primary">首页</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <a href="#" class="hover:text-primary">学习路径</a>
                    <i class="fa fa-angle-right mx-2 text-gray-300"></i>
                    <span class="text-primary font-medium">创建学习路径</span>
                </div>
                
                <!-- 内容标题区 -->
                <div class="mb-6">
                    <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">创建学习路径</h2>
                    <p class="text-gray-500 mt-1">创建个性化的学习路径，帮助学生系统掌握知识和技能</p>
                </div>
                
                <!-- 步骤导航 -->
                <div class="bg-white rounded-xl shadow-sm p-6 mb-6 fade-in">
                    <div class="flex flex-wrap items-center justify-between mb-6">
                        <h3 class="text-lg font-bold">路径创建向导</h3>
                        <div class="text-sm text-gray-500">步骤 <span id="current-step">1</span> / 4</div>
                    </div>
                    
                    <div class="flex flex-wrap gap-3 mb-6">
                        <div id="step-1" class="step-active flex items-center px-4 py-2 rounded-full border-2 transition-all cursor-pointer">
                            <div class="w-6 h-6 rounded-full bg-primary text-white flex items-center justify-center mr-2">1</div>
                            <span>基本信息</span>
                        </div>
                        
                        <div id="step-2" class="border-gray-200 bg-gray-50 text-gray-500 flex items-center px-4 py-2 rounded-full border-2 transition-all cursor-pointer">
                            <div class="w-6 h-6 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mr-2">2</div>
                            <span>模块设置</span>
                        </div>
                        
                        <div id="step-3" class="border-gray-200 bg-gray-50 text-gray-500 flex items-center px-4 py-2 rounded-full border-2 transition-all cursor-pointer">
                            <div class="w-6 h-6 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mr-2">3</div>
                            <span>内容规划</span>
                        </div>
                        
                        <div id="step-4" class="border-gray-200 bg-gray-50 text-gray-500 flex items-center px-4 py-2 rounded-full border-2 transition-all cursor-pointer">
                            <div class="w-6 h-6 rounded-full bg-gray-200 text-gray-600 flex items-center justify-center mr-2">4</div>
                            <span>发布设置</span>
                        </div>
                    </div>
                    
                    <!-- 步骤内容：基本信息 -->
                    <div id="step-1-content" class="space-y-6">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="path-name" class="block text-sm font-medium text-gray-700 mb-1">路径名称 <span class="text-danger">*</span></label>
                                <input type="text" id="path-name" name="path-name" 
                                       class="w-full px-4 py-2 rounded-lg border border-gray-300 form-input-focus"
                                       placeholder="输入学习路径名称">
                                <p id="path-name-error" class="text-danger text-sm mt-1 hidden">请输入路径名称</p>
                            </div>
                            
                            <div>
                                <label for="path-subject" class="block text-sm font-medium text-gray-700 mb-1">所属学科 <span class="text-danger">*</span></label>
                                <select id="path-subject" name="path-subject" 
                                        class="w-full px-4 py-2 rounded-lg border border-gray-300 form-input-focus">
                                    <option value="">请选择学科</option>
                                    <option value="math">数学</option>
                                    <option value="physics">物理</option>
                                    <option value="chemistry">化学</option>
                                    <option value="biology">生物</option>
                                    <option value="english">英语</option>
                                    <option value="chinese">语文</option>
                                </select>
                                <p id="path-subject-error" class="text-danger text-sm mt-1 hidden">请选择所属学科</p>
                            </div>
                        </div>
                        
                        <div>
                            <label for="path-description" class="block text-sm font-medium text-gray-700 mb-1">路径描述 <span class="text-danger">*</span></label>
                            <textarea id="path-description" name="path-description" rows="4" 
                                      class="w-full px-4 py-2 rounded-lg border border-gray-300 form-input-focus"
                                      placeholder="简要描述学习路径的内容和目标"></textarea>
                            <p id="path-description-error" class="text-danger text-sm mt-1 hidden">请输入路径描述</p>
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            <div>
                                <label for="estimated-time" class="block text-sm font-medium text-gray-700 mb-1">预计学习时间 <span class="text-danger">*</span></label>
                                <div class="flex items-center">
                                    <input type="number" id="estimated-time" name="estimated-time" min="1" 
                                           class="w-full px-4 py-2 rounded-lg border border-gray-300 form-input-focus"
                                           placeholder="输入预计学习时间">
                                    <span class="ml-2 text-gray-500">个月</span>
                                </div>
                                <p id="estimated-time-error" class="text-danger text-sm mt-1 hidden">请输入预计学习时间</p>
                            </div>
                            
                            <div>
                                <label for="difficulty-level" class="block text-sm font-medium text-gray-700 mb-1">难度级别 <span class="text-danger">*</span></label>
                                <select id="difficulty-level" name="difficulty-level" 
                                        class="w-full px-4 py-2 rounded-lg border border-gray-300 form-input-focus">
                                    <option value="">请选择难度级别</option>
                                    <option value="easy">初级</option>
                                    <option value="medium">中级</option>
                                    <option value="hard">高级</option>
                                    <option value="expert">专家级</option>
                                </select>
                                <p id="difficulty-level-error" class="text-danger text-sm mt-1 hidden">请选择难度级别</p>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">路径封面图</label>
                            <div class="flex items-center justify-center w-full">
                                <label for="path-cover" class="flex flex-col items-center justify-center w-full h-40 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition-colors">
                                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
                                        <i class="fa fa-cloud-upload text-3xl text-gray-400 mb-2"></i>
                                        <p class="mb-2 text-sm text-gray-500"><span class="font-medium">点击上传封面图</span> 或拖拽文件到此处</p>
                                        <p class="text-xs text-gray-500">支持 PNG, JPG 或 GIF (最大 5MB)</p>
                                    </div>
                                    <input id="path-cover" type="file" class="hidden" accept="image/*" />
                                </label>
                            </div>
                            <div id="preview-container" class="mt-3 hidden">
                                <img id="cover-preview" src="" alt="封面预览" class="w-32 h-20 object-cover rounded-lg">
                                <button id="remove-cover" class="ml-2 text-danger text-sm hover:underline">移除</button>
                            </div>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">路径标签</label>
                            <div class="flex flex-wrap gap-2 mb-2">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-blue-100 text-blue-800">
                                    数学思想
                                    <button type="button" class="ml-1 text-blue-800 hover:text-blue-600">
                                        <i class="fa fa-times-circle"></i>
                                    </button>
                                </span>
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm bg-green-100 text-green-800">
                                    解题方法
                                    <button type="button" class="ml-1 text-green-800 hover:text-green-600">
                                        <i class="fa fa-times-circle"></i>
                                    </button>
                                </span>
                            </div>
                            <div class="flex">
                                <input type="text" id="tag-input" placeholder="添加标签，按Enter确认" 
                                       class="flex-1 px-4 py-2 rounded-l-lg border border-gray-300 form-input-focus">
                                <button id="add-tag" class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-primary/90 transition-colors">
                                    添加
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤内容：模块设置 (默认隐藏) -->
                    <div id="step-2-content" class="space-y-6 hidden">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="flex items-center justify-between mb-4">
                                <h4 class="font-medium">学习模块设置</h4>
                                <button id="add-module" class="text-primary hover:text-primary/80 transition-colors text-sm font-medium flex items-center">
                                    <i class="fa fa-plus-circle mr-1"></i> 添加模块
                                </button>
                            </div>
                            
                            <div id="modules-container">
                                <!-- 模块1 -->
                                <div class="border border-gray-200 rounded-lg mb-4 overflow-hidden">
                                    <div class="bg-white p-4 flex items-center justify-between cursor-pointer module-header">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">1</div>
                                            <input type="text" placeholder="输入模块名称" value="函数与方程思想" 
                                                   class="px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded w-full">
                                        </div>
                                        <div class="flex items-center space-x-2">
                                            <button class="text-gray-400 hover:text-gray-600 transition-colors">
                                                <i class="fa fa-arrows"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors delete-module">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="bg-gray-50 p-4 border-t border-gray-200">
                                        <div class="mb-3">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">模块描述</label>
                                            <textarea placeholder="简要描述模块内容" rows="2" 
                                                      class="w-full px-4 py-2 rounded-lg border border-gray-300 form-input-focus">学习函数思想和方程思想的基本概念，掌握如何将问题转化为函数或方程模型解决。</textarea>
                                        </div>
                                        <div class="flex items-center justify-between text-sm">
                                            <span class="text-gray-500">预计学习时间: <input type="number" value="15" min="1" max="99" class="w-12 px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded"> 小时</span>
                                            <span class="text-gray-500">思想方法数量: <input type="number" value="6" min="1" max="99" class="w-12 px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded"></span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 模块2 -->
                                <div class="border border-gray-200 rounded-lg mb-4 overflow-hidden">
                                    <div class="bg-white p-4 flex items-center justify-between cursor-pointer module-header">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">2</div>
                                            <input type="text" placeholder="输入模块名称" value="数形结合思想" 
                                                   class="px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded w-full">
                                        </div>
                                        <div class="flex items-center space-x-2">
                                            <button class="text-gray-400 hover:text-gray-600 transition-colors">
                                                <i class="fa fa-arrows"></i>
                                            </button>
                                            <button class="text-gray-400 hover:text-danger transition-colors delete-module">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <div class="bg-gray-50 p-4 border-t border-gray-200">
                                        <div class="mb-3">
                                            <label class="block text-sm font-medium text-gray-700 mb-1">模块描述</label>
                                            <textarea placeholder="简要描述模块内容" rows="2" 
                                                      class="w-full px-4 py-2 rounded-lg border border-gray-300 form-input-focus">学习如何将代数问题与几何图形相结合，利用图形的直观性解决代数问题。</textarea>
                                        </div>
                                        <div class="flex items-center justify-between text-sm">
                                            <span class="text-gray-500">预计学习时间: <input type="number" value="18" min="1" max="99" class="w-12 px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded"> 小时</span>
                                            <span class="text-gray-500">思想方法数量: <input type="number" value="8" min="1" max="99" class="w-12 px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h4 class="font-medium mb-4">学习路径结构预览</h4>
                            <div class="border border-gray-200 rounded-lg p-4 bg-white">
                                <div class="flex items-center mb-4">
                                    <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center">
                                        <i class="fa fa-book"></i>
                                    </div>
                                    <div class="ml-3">
                                        <h5 class="font-medium">数学思想方法</h5>
                                        <p class="text-sm text-gray-500">预计学习时间: 3个月</p>
                                    </div>
                                </div>
                                
                                <div class="pl-5 border-l-2 border-gray-200 space-y-4">
                                    <div class="path-node bg-blue-50 p-3 rounded-lg">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">1</div>
                                            <div>
                                                <h6 class="font-medium">函数与方程思想</h6>
                                                <p class="text-sm text-gray-500">预计学习时间: 15小时</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="path-node bg-blue-50 p-3 rounded-lg">
                                        <div class="flex items-center">
                                            <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">2</div>
                                            <div>
                                                <h6 class="font-medium">数形结合思想</h6>
                                                <p class="text-sm text-gray-500">预计学习时间: 18小时</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="flex items-center">
                                        <button class="text-primary hover:text-primary/80 transition-colors text-sm font-medium flex items-center">
                                            <i class="fa fa-plus-circle mr-1"></i> 添加更多模块
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤内容：内容规划 (默认隐藏) -->
                    <div id="step-3-content" class="space-y-6 hidden">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <div class="flex items-center justify-between mb-4">
                                <h4 class="font-medium">模块内容规划</h4>
                                <div class="relative">
                                    <select class="appearance-none bg-white rounded-lg px-3 py-2 pr-8 focus:outline-none focus:ring-1 focus:ring-primary">
                                        <option>函数与方程思想</option>
                                        <option>数形结合思想</option>
                                    </select>
                                    <i class="fa fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <button id="add-content-item" class="text-primary hover:text-primary/80 transition-colors text-sm font-medium flex items-center mb-3">
                                    <i class="fa fa-plus-circle mr-1"></i> 添加内容项
                                </button>
                                
                                <div class="space-y-3">
                                    <!-- 内容项1 -->
                                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                                        <div class="bg-white p-3 flex items-center justify-between cursor-pointer content-header">
                                            <div class="flex items-center">
                                                <div class="w-7 h-7 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3">
                                                    <i class="fa fa-video-camera"></i>
                                                </div>
                                                <input type="text" placeholder="输入内容标题" value="函数思想的基本概念" 
                                                       class="px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded w-full">
                                            </div>
                                            <div class="flex items-center space-x-2">
                                                <button class="text-gray-400 hover:text-gray-600 transition-colors">
                                                    <i class="fa fa-arrows"></i>
                                                </button>
                                                <button class="text-gray-400 hover:text-danger transition-colors delete-content">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="bg-gray-50 p-3 border-t border-gray-200">
                                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-700 mb-1">内容类型</label>
                                                    <select class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0">
                                                        <option value="video">视频课程</option>
                                                        <option value="article">文章</option>
                                                        <option value="quiz">测验</option>
                                                        <option value="assignment">作业</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-700 mb-1">预计时长</label>
                                                    <input type="number" value="25" min="1" max="999" 
                                                           class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0">
                                                    <span class="text-xs text-gray-500">分钟</span>
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-700 mb-1">是否必修</label>
                                                    <div class="flex items-center">
                                                        <input type="checkbox" id="required-1" checked 
                                                               class="w-4 h-4 text-primary focus:ring-primary rounded">
                                                        <label for="required-1" class="ml-2 text-sm text-gray-700">必修</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <label class="block text-xs font-medium text-gray-700 mb-1">内容描述</label>
                                                <textarea placeholder="简要描述内容" rows="2" 
                                                          class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0">介绍函数思想的基本概念和应用场景，通过实例讲解如何建立函数模型。</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 内容项2 -->
                                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                                        <div class="bg-white p-3 flex items-center justify-between cursor-pointer content-header">
                                            <div class="flex items-center">
                                                <div class="w-7 h-7 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">
                                                    <i class="fa fa-file-text-o"></i>
                                                </div>
                                                <input type="text" placeholder="输入内容标题" value="方程思想解题方法" 
                                                       class="px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded w-full">
                                            </div>
                                            <div class="flex items-center space-x-2">
                                                <button class="text-gray-400 hover:text-gray-600 transition-colors">
                                                    <i class="fa fa-arrows"></i>
                                                </button>
                                                <button class="text-gray-400 hover:text-danger transition-colors delete-content">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="bg-gray-50 p-3 border-t border-gray-200">
                                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-700 mb-1">内容类型</label>
                                                    <select class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0">
                                                        <option value="video">视频课程</option>
                                                        <option value="article" selected>文章</option>
                                                        <option value="quiz">测验</option>
                                                        <option value="assignment">作业</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-700 mb-1">预计时长</label>
                                                    <input type="number" value="40" min="1" max="999" 
                                                           class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0">
                                                    <span class="text-xs text-gray-500">分钟</span>
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-700 mb-1">是否必修</label>
                                                    <div class="flex items-center">
                                                        <input type="checkbox" id="required-2" checked 
                                                               class="w-4 h-4 text-primary focus:ring-primary rounded">
                                                        <label for="required-2" class="ml-2 text-sm text-gray-700">必修</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <label class="block text-xs font-medium text-gray-700 mb-1">内容描述</label>
                                                <textarea placeholder="简要描述内容" rows="2" 
                                                          class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0">详细讲解方程思想的解题步骤和技巧，通过典型例题分析如何建立和求解方程。</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 内容项3 -->
                                    <div class="border border-gray-200 rounded-lg overflow-hidden">
                                        <div class="bg-white p-3 flex items-center justify-between cursor-pointer content-header">
                                            <div class="flex items-center">
                                                <div class="w-7 h-7 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3">
                                                    <i class="fa fa-question-circle"></i>
                                                </div>
                                                <input type="text" placeholder="输入内容标题" value="函数与方程思想测验" 
                                                       class="px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded w-full">
                                            </div>
                                            <div class="flex items-center space-x-2">
                                                <button class="text-gray-400 hover:text-gray-600 transition-colors">
                                                    <i class="fa fa-arrows"></i>
                                                </button>
                                                <button class="text-gray-400 hover:text-danger transition-colors delete-content">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="bg-gray-50 p-3 border-t border-gray-200">
                                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-700 mb-1">内容类型</label>
                                                    <select class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0">
                                                        <option value="video">视频课程</option>
                                                        <option value="article">文章</option>
                                                        <option value="quiz" selected>测验</option>
                                                        <option value="assignment">作业</option>
                                                    </select>
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-700 mb-1">预计时长</label>
                                                    <input type="number" value="30" min="1" max="999" 
                                                           class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0">
                                                    <span class="text-xs text-gray-500">分钟</span>
                                                </div>
                                                <div>
                                                    <label class="block text-xs font-medium text-gray-700 mb-1">是否必修</label>
                                                    <div class="flex items-center">
                                                        <input type="checkbox" id="required-3" checked 
                                                               class="w-4 h-4 text-primary focus:ring-primary rounded">
                                                        <label for="required-3" class="ml-2 text-sm text-gray-700">必修</label>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mt-3">
                                                <label class="block text-xs font-medium text-gray-700 mb-1">内容描述</label>
                                                <textarea placeholder="简要描述内容" rows="2" 
                                                          class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0">包含15道选择题和5道解答题，检验学生对函数与方程思想的理解和应用能力。</textarea>
                                            </div>
                                            <div class="mt-3">
                                                <label class="block text-xs font-medium text-gray-700 mb-1">通过分数</label>
                                                <input type="number" value="70" min="0" max="100" 
                                                       class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0">
                                                <span class="text-xs text-gray-500">分</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h4 class="font-medium mb-4">学习路径内容统计</h4>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <div class="bg-white p-4 rounded-lg border border-gray-200">
                                    <div class="flex items-center justify-between mb-2">
                                        <h5 class="text-sm font-medium text-gray-500">总模块数</h5>
                                        <span class="text-2xl font-bold text-primary">2</span>
                                    </div>
                                    <div class="text-xs text-gray-500">
                                        <i class="fa fa-arrow-up text-success mr-1"></i> 相比上月增加 1
                                    </div>
                                </div>
                                
                                <div class="bg-white p-4 rounded-lg border border-gray-200">
                                    <div class="flex items-center justify-between mb-2">
                                        <h5 class="text-sm font-medium text-gray-500">总内容项</h5>
                                        <span class="text-2xl font-bold text-primary">3</span>
                                    </div>
                                    <div class="text-xs text-gray-500">
                                        <i class="fa fa-arrow-up text-success mr-1"></i> 相比上月增加 2
                                    </div>
                                </div>
                                
                                <div class="bg-white p-4 rounded-lg border border-gray-200">
                                    <div class="flex items-center justify-between mb-2">
                                        <h5 class="text-sm font-medium text-gray-500">预计总时长</h5>
                                        <span class="text-2xl font-bold text-primary">1.5小时</span>
                                    </div>
                                    <div class="text-xs text-gray-500">
                                        <i class="fa fa-arrow-up text-success mr-1"></i> 相比上月增加 1小时
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤内容：发布设置 (默认隐藏) -->
                    <div id="step-4-content" class="space-y-6 hidden">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h4 class="font-medium mb-4">发布设置</h4>
                            
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">发布状态</label>
                                    <div class="space-y-2">
                                        <div class="flex items-center">
                                            <input type="radio" id="publish-now" name="publish-status" checked 
                                                   class="w-4 h-4 text-primary focus:ring-primary">
                                            <label for="publish-now" class="ml-2 text-sm text-gray-700">立即发布</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="radio" id="publish-later" name="publish-status" 
                                                   class="w-4 h-4 text-primary focus:ring-primary">
                                            <label for="publish-later" class="ml-2 text-sm text-gray-700">保存为草稿</label>
                                        </div>
                                        <div class="flex items-center">
                                            <input type="radio" id="publish-scheduled" name="publish-status" 
                                                   class="w-4 h-4 text-primary focus:ring-primary">
                                            <label for="publish-scheduled" class="ml-2 text-sm text-gray-700">定时发布</label>
                                        </div>
                                    </div>
                                    
                                    <div id="publish-date-container" class="mt-3 hidden">
                                        <label for="publish-date" class="block text-sm font-medium text-gray-700 mb-1">发布日期</label>
                                        <input type="date" id="publish-date" name="publish-date" 
                                               class="w-full px-4 py-2 rounded-lg border border-gray-300 form-input-focus">
                                    </div>
                                </div>
                                
                                <div>
                                    <label class="block text-sm font-medium text-gray-700 mb-1">访问权限</label>
                                    <select class="w-full px-4 py-2 rounded-lg border border-gray-300 form-input-focus">
                                        <option value="public">公开 - 所有人可见</option>
                                        <option value="private">私有 - 仅自己可见</option>
                                        <option value="password">密码保护</option>
                                        <option value="invite">邀请制 - 仅限邀请用户</option>
                                        <option value="organization">组织内可见</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h4 class="font-medium mb-4">学习路径分析</h4>
                            
                            <div class="bg-white p-4 rounded-lg border border-gray-200">
                                <div class="h-64">
                                    <canvas id="learning-path-stats"></canvas>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h4 class="font-medium mb-4">学习路径预览</h4>
                            
                            <div class="border border-gray-200 rounded-lg overflow-hidden">
                                <div class="bg-white p-4">
                                    <div class="flex items-center justify-between mb-4">
                                        <h5 class="font-medium">数学思想方法</h5>
                                        <span class="text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full">进行中</span>
                                    </div>
                                    
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                                        <div class="flex items-center">
                                            <i class="fa fa-book text-gray-400 mr-2"></i>
                                            <span class="text-sm">2 个模块</span>
                                        </div>
                                        <div class="flex items-center">
                                            <i class="fa fa-clock-o text-gray-400 mr-2"></i>
                                            <span class="text-sm">约 33 小时</span>
                                        </div>
                                        <div class="flex items-center">
                                            <i class="fa fa-signal text-gray-400 mr-2"></i>
                                            <span class="text-sm">中级难度</span>
                                        </div>
                                    </div>
                                    
                                    <p class="text-sm text-gray-600 mb-4">
                                        本学习路径系统介绍了数学中的重要思想方法，包括函数与方程思想、数形结合思想等，帮助学生建立数学思维，提高解题能力。
                                    </p>
                                    
                                    <div class="flex flex-wrap gap-2 mb-4">
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-800">
                                            数学思想
                                        </span>
                                        <span class="inline-flex items-center px-2 py-1 rounded-full text-xs bg-green-100 text-green-800">
                                            解题方法
                                        </span>
                                    </div>
                                    
                                    <div class="border-t border-gray-200 pt-4">
                                        <h6 class="font-medium mb-3">学习模块</h6>
                                        
                                        <div class="space-y-3">
                                            <div class="bg-gray-50 p-3 rounded-lg">
                                                <div class="flex items-center justify-between">
                                                    <div class="flex items-center">
                                                        <div class="w-7 h-7 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">1</div>
                                                        <div>
                                                            <h7 class="font-medium">函数与方程思想</h7>
                                                            <p class="text-xs text-gray-500">15小时 · 3个内容项</p>
                                                        </div>
                                                    </div>
                                                    <button class="text-primary hover:text-primary/80 transition-colors text-xs">
                                                        查看详情
                                                    </button>
                                                </div>
                                            </div>
                                            
                                            <div class="bg-gray-50 p-3 rounded-lg">
                                                <div class="flex items-center justify-between">
                                                    <div class="flex items-center">
                                                        <div class="w-7 h-7 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">2</div>
                                                        <div>
                                                            <h7 class="font-medium">数形结合思想</h7>
                                                            <p class="text-xs text-gray-500">18小时 · 0个内容项</p>
                                                        </div>
                                                    </div>
                                                    <button class="text-primary hover:text-primary/80 transition-colors text-xs">
                                                        查看详情
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex justify-end mt-8">
                        <button id="prev-step" class="px-6 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors mr-3 hidden">
                            <i class="fa fa-arrow-left mr-1"></i> 上一步
                        </button>
                        <button id="next-step" class="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            下一步 <i class="fa fa-arrow-right ml-1"></i>
                        </button>
                        <button id="submit-path" class="px-6 py-2 bg-success text-white rounded-lg hover:bg-success/90 transition-colors hidden">
                            完成创建 <i class="fa fa-check ml-1"></i>
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <footer class="bg-white border-t border-gray-200 py-4">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p class="text-sm text-gray-500">© 2025 试题库管理系统. 保留所有权利.</p>
                </div>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-file-text-o mr-1"></i> 使用条款
                    </a>
                    <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                        <i class="fa fa-shield mr-1"></i> 隐私政策
                    </a>
                </div>
            </div>
        </div>
    </footer>
    
    <script>
        // 侧边栏切换
        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            sidebar.classList.toggle('-translate-x-full');
        });
        
        // 步骤导航逻辑
        let currentStep = 1;
        const totalSteps = 4;
        
        function updateStepUI() {
            // 更新步骤按钮样式
            for (let i = 1; i <= totalSteps; i++) {
                const stepEl = document.getElementById(`step-${i}`);
                if (i < currentStep) {
                    stepEl.className = 'step-completed flex items-center px-4 py-2 rounded-full border-2 transition-all cursor-pointer';
                } else if (i === currentStep) {
                    stepEl.className = 'step-active flex items-center px-4 py-2 rounded-full border-2 transition-all cursor-pointer';
                } else {
                    stepEl.className = 'border-gray-200 bg-gray-50 text-gray-500 flex items-center px-4 py-2 rounded-full border-2 transition-all cursor-pointer';
                }
            }
            
            // 更新步骤内容显示
            for (let i = 1; i <= totalSteps; i++) {
                const contentEl = document.getElementById(`step-${i}-content`);
                if (i === currentStep) {
                    contentEl.classList.remove('hidden');
                    contentEl.classList.add('fade-in');
                } else {
                    contentEl.classList.add('hidden');
                    contentEl.classList.remove('fade-in');
                }
            }
            
            // 更新当前步骤显示
            document.getElementById('current-step').textContent = currentStep;
            
            // 更新按钮显示
            if (currentStep === 1) {
                document.getElementById('prev-step').classList.add('hidden');
            } else {
                document.getElementById('prev-step').classList.remove('hidden');
            }
            
            if (currentStep === totalSteps) {
                document.getElementById('next-step').classList.add('hidden');
                document.getElementById('submit-path').classList.remove('hidden');
            } else {
                document.getElementById('next-step').classList.remove('hidden');
                document.getElementById('submit-path').classList.add('hidden');
            }
        }
        
        // 步骤按钮点击事件
        for (let i = 1; i <= totalSteps; i++) {
            document.getElementById(`step-${i}`).addEventListener('click', function() {
                if (i <= currentStep) {
                    currentStep = i;
                    updateStepUI();
                }
            });
        }
        
        // 上一步按钮点击事件
        document.getElementById('prev-step').addEventListener('click', function() {
            if (currentStep > 1) {
                currentStep--;
                updateStepUI();
            }
        });
        
        // 下一步按钮点击事件
        document.getElementById('next-step').addEventListener('click', function() {
            if (currentStep < totalSteps) {
                // 表单验证
                let isValid = true;
                
                if (currentStep === 1) {
                    // 验证基本信息
                    const pathName = document.getElementById('path-name').value.trim();
                    const pathSubject = document.getElementById('path-subject').value;
                    const pathDescription = document.getElementById('path-description').value.trim();
                    const estimatedTime = document.getElementById('estimated-time').value;
                    const difficultyLevel = document.getElementById('difficulty-level').value;
                    
                    if (!pathName) {
                        document.getElementById('path-name-error').classList.remove('hidden');
                        isValid = false;
                    } else {
                        document.getElementById('path-name-error').classList.add('hidden');
                    }
                    
                    if (!pathSubject) {
                        document.getElementById('path-subject-error').classList.remove('hidden');
                        isValid = false;
                    } else {
                        document.getElementById('path-subject-error').classList.add('hidden');
                    }
                    
                    if (!pathDescription) {
                        document.getElementById('path-description-error').classList.remove('hidden');
                        isValid = false;
                    } else {
                        document.getElementById('path-description-error').classList.add('hidden');
                    }
                    
                    if (!estimatedTime) {
                        document.getElementById('estimated-time-error').classList.remove('hidden');
                        isValid = false;
                    } else {
                        document.getElementById('estimated-time-error').classList.add('hidden');
                    }
                    
                    if (!difficultyLevel) {
                        document.getElementById('difficulty-level-error').classList.remove('hidden');
                        isValid = false;
                    } else {
                        document.getElementById('difficulty-level-error').classList.add('hidden');
                    }
                }
                
                if (isValid) {
                    currentStep++;
                    updateStepUI();
                }
            }
        });
        
        // 提交按钮点击事件
        document.getElementById('submit-path').addEventListener('click', function() {
            // 这里添加提交表单的逻辑
            alert('学习路径创建成功！');
        });
        
        // 标签添加功能
        document.getElementById('add-tag').addEventListener('click', function() {
            const tagInput = document.getElementById('tag-input');
            const tagText = tagInput.value.trim();
            
            if (tagText) {
                const randomColorClass = ['bg-blue-100 text-blue-800', 'bg-green-100 text-green-800', 'bg-purple-100 text-purple-800', 'bg-yellow-100 text-yellow-800'][Math.floor(Math.random() * 4)];
                
                const tagElement = document.createElement('span');
                tagElement.className = `inline-flex items-center px-3 py-1 rounded-full text-sm ${randomColorClass}`;
                tagElement.innerHTML = `
                    ${tagText}
                    <button type="button" class="ml-1 hover:text-opacity-70 transition-opacity">
                        <i class="fa fa-times-circle"></i>
                    </button>
                `;
                
                // 添加删除事件
                tagElement.querySelector('button').addEventListener('click', function() {
                    tagElement.remove();
                });
                
                // 添加到标签列表
                document.querySelector('#step-1-content .flex.flex-wrap.gap-2').appendChild(tagElement);
                
                // 清空输入框
                tagInput.value = '';
            }
        });
        
        // 标签输入框按Enter添加标签
        document.getElementById('tag-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.getElementById('add-tag').click();
            }
        });
        
        // 封面图上传预览
        document.getElementById('path-cover').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('cover-preview').src = e.target.result;
                    document.getElementById('preview-container').classList.remove('hidden');
                }
                reader.readAsDataURL(file);
            }
        });
        
        // 移除封面图
        document.getElementById('remove-cover').addEventListener('click', function() {
            document.getElementById('path-cover').value = '';
            document.getElementById('cover-preview').src = '';
            document.getElementById('preview-container').classList.add('hidden');
        });
        
        // 添加模块
        document.getElementById('add-module').addEventListener('click', function() {
            const modulesContainer = document.getElementById('modules-container');
            const moduleCount = modulesContainer.querySelectorAll('.border.border-gray-200.rounded-lg').length;
            
            const newModule = document.createElement('div');
            newModule.className = 'border border-gray-200 rounded-lg mb-4 overflow-hidden';
            newModule.innerHTML = `
                <div class="bg-white p-4 flex items-center justify-between cursor-pointer module-header">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3">${moduleCount + 1}</div>
                        <input type="text" placeholder="输入模块名称" 
                               class="px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded w-full">
                    </div>
                    <div class="flex items-center space-x-2">
                        <button class="text-gray-400 hover:text-gray-600 transition-colors">
                            <i class="fa fa-arrows"></i>
                        </button>
                        <button class="text-gray-400 hover:text-danger transition-colors delete-module">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="bg-gray-50 p-4 border-t border-gray-200">
                    <div class="mb-3">
                        <label class="block text-sm font-medium text-gray-700 mb-1">模块描述</label>
                        <textarea placeholder="简要描述模块内容" rows="2" 
                                  class="w-full px-4 py-2 rounded-lg border border-gray-300 form-input-focus"></textarea>
                    </div>
                    <div class="flex items-center justify-between text-sm">
                        <span class="text-gray-500">预计学习时间: <input type="number" value="15" min="1" max="99" class="w-12 px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded"> 小时</span>
                        <span class="text-gray-500">思想方法数量: <input type="number" value="6" min="1" max="99" class="w-12 px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded"></span>
                    </div>
                </div>
            `;
            
            modulesContainer.appendChild(newModule);
            
            // 添加删除模块事件
            newModule.querySelector('.delete-module').addEventListener('click', function() {
                newModule.remove();
                updateModuleNumbers();
            });
            
            // 添加模块折叠/展开事件
            newModule.querySelector('.module-header').addEventListener('click', function() {
                const content = newModule.querySelector('.bg-gray-50.p-4.border-t.border-gray-200');
                content.classList.toggle('hidden');
            });
        });
        
        // 删除模块
        document.querySelectorAll('.delete-module').forEach(button => {
            button.addEventListener('click', function() {
                const module = button.closest('.border.border-gray-200.rounded-lg');
                module.remove();
                updateModuleNumbers();
            });
        });
        
        // 更新模块编号
        function updateModuleNumbers() {
            const modules = document.querySelectorAll('.border.border-gray-200.rounded-lg');
            modules.forEach((module, index) => {
                module.querySelector('.w-8.h-8.rounded-full.bg-blue-100').textContent = index + 1;
            });
        }
        
        // 模块折叠/展开
        document.querySelectorAll('.module-header').forEach(header => {
            header.addEventListener('click', function() {
                const content = header.nextElementSibling;
                content.classList.toggle('hidden');
            });
        });
        
        // 添加内容项
        document.getElementById('add-content-item').addEventListener('click', function() {
            const contentContainer = document.querySelector('#step-3-content .space-y-3');
            const contentCount = contentContainer.querySelectorAll('.border.border-gray-200.rounded-lg').length;
            
            const newContent = document.createElement('div');
            newContent.className = 'border border-gray-200 rounded-lg overflow-hidden';
            newContent.innerHTML = `
                <div class="bg-white p-3 flex items-center justify-between cursor-pointer content-header">
                    <div class="flex items-center">
                        <div class="w-7 h-7 rounded-full bg-green-100 text-green-600 flex items-center justify-center mr-3">
                            <i class="fa fa-video-camera"></i>
                        </div>
                        <input type="text" placeholder="输入内容标题" 
                               class="px-2 py-1 border border-transparent focus:border-primary focus:ring-0 rounded w-full">
                    </div>
                    <div class="flex items-center space-x-2">
                        <button class="text-gray-400 hover:text-gray-600 transition-colors">
                            <i class="fa fa-arrows"></i>
                        </button>
                        <button class="text-gray-400 hover:text-danger transition-colors delete-content">
                            <i class="fa fa-trash"></i>
                        </button>
                    </div>
                </div>
                <div class="bg-gray-50 p-3 border-t border-gray-200">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">内容类型</label>
                            <select class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0">
                                <option value="video">视频课程</option>
                                <option value="article">文章</option>
                                <option value="quiz">测验</option>
                                <option value="assignment">作业</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">预计时长</label>
                            <input type="number" value="25" min="1" max="999" 
                                   class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0">
                            <span class="text-xs text-gray-500">分钟</span>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">是否必修</label>
                            <div class="flex items-center">
                                <input type="checkbox" id="required-${contentCount + 1}" checked 
                                       class="w-4 h-4 text-primary focus:ring-primary rounded">
                                <label for="required-${contentCount + 1}" class="ml-2 text-sm text-gray-700">必修</label>
                            </div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <label class="block text-xs font-medium text-gray-700 mb-1">内容描述</label>
                        <textarea placeholder="简要描述内容" rows="2" 
                                  class="w-full px-3 py-1.5 rounded-lg border border-gray-300 focus:border-primary focus:ring-0"></textarea>
                    </div>
                </div>
            `;
            
            contentContainer.appendChild(newContent);
            
            // 添加删除内容事件
            newContent.querySelector('.delete-content').addEventListener('click', function() {
                newContent.remove();
            });
            
            // 添加内容折叠/展开事件
            newContent.querySelector('.content-header').addEventListener('click', function() {
                const content = newContent.querySelector('.bg-gray-50.p-3.border-t.border-gray-200');
                content.classList.toggle('hidden');
            });
        });
        
        // 删除内容项
        document.querySelectorAll('.delete-content').forEach(button => {
            button.addEventListener('click', function() {
                const content = button.closest('.border.border-gray-200.rounded-lg');
                content.remove();
            });
        });
        
        // 内容折叠/展开
        document.querySelectorAll('.content-header').forEach(header => {
            header.addEventListener('click', function() {
                const content = header.nextElementSibling;
                content.classList.toggle('hidden');
            });
        });
        
        // 定时发布日期选择器显示/隐藏
        document.getElementById('publish-scheduled').addEventListener('change', function() {
            const container = document.getElementById('publish-date-container');
            if (this.checked) {
                container.classList.remove('hidden');
            } else {
                container.classList.add('hidden');
            }
        });
        
        // 初始化图表
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('learning-path-stats').getContext('2d');
            
            const chart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['函数与方程思想', '数形结合思想'],
                    datasets: [{
                        label: '内容项数量',
                        data: [3, 0],
                        backgroundColor: [
                            'rgba(22, 93, 255, 0.6)',
                            'rgba(54, 203, 203, 0.6)'
                        ],
                        borderColor: [
                            'rgba(22, 93, 255, 1)',
                            'rgba(54, 203, 203, 1)'
                        ],
                        borderWidth: 1
                    }, {
                        label: '预计学习时间(小时)',
                        data: [1.5, 0],
                        backgroundColor: [
                            'rgba(22, 93, 255, 0.3)',
                            'rgba(54, 203, 203, 0.3)'
                        ],
                        borderColor: [
                            'rgba(22, 93, 255, 0.7)',
                            'rgba(54, 203, 203, 0.7)'
                        ],
                        borderWidth: 1,
                        type: 'line',
                        yAxisID: 'y1'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: '内容项数量'
                            }
                        },
                        y1: {
                            beginAtZero: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: '预计学习时间(小时)'
                            },
                            grid: {
                                drawOnChartArea: false,
                            }
                        }
                    }
                }
            });
        });
        
        // 页面滚动时导航栏效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('shadow');
            } else {
                header.classList.remove('shadow');
            }
        });
    </script>
</body>
</html>    